<template>
  <div class="material-statics-container">
    <div class="statics-list">
      <div class="statics-item soil">
        <div class="statics-num">
          <p>{{ materialData.soil.summary }}</p>
          <span :class="{ warning: materialData.soil.devide_rate[0] === '-' }">{{ materialData.soil.devide_rate }}</span>
        </div>
        <div class="statics-title">
          <p>混凝土</p>
        </div>
      </div>
      <div class="statics-item cement">
        <div class="statics-num">
          <p>{{ materialData.cement.summary }}</p>
          <span :class="{ warning: materialData.cement.devide_rate[0] === '-' }">{{ materialData.cement.devide_rate }}</span>
        </div>
        <div class="statics-title">
          <p>水泥</p>
        </div>
      </div>
      <div class="statics-item sand">
        <div class="statics-num">
          <p>{{ materialData.sand.summary }}</p>
          <span :class="{ warning: materialData.sand.devide_rate[0] === '-' }">{{ materialData.sand.devide_rate }}</span>
        </div>
        <div class="statics-title">
          <p>黄沙</p>
        </div>
      </div>
      <div class="statics-item stone">
        <div class="statics-num">
          <p>{{ materialData.stone.summary }}</p>
          <span :class="{ warning: materialData.stone.devide_rate[0] === '-' }">{{ materialData.stone.devide_rate }}</span>
        </div>
        <div class="statics-title">
          <p>石子</p>
        </div>
      </div>
    </div>
    <div class="register-person-echart">
      <div class="register-person-title">
        <h2>各项目累计偏差</h2>
        <el-select v-model="selectValue"
                   size="small"
                   @change="getMaterialData">
          <el-option v-for="item in materialList"
                     :key="item.value"
                     :label="item.name"
                     :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div id="projectDeviationEchart"
           class="project-deviation-echart"></div>
    </div>
  </div>
</template>
<script>
import { standardCodeApi } from "@/services/StandardCode";
import moment from "moment";
import mockData from "./mock";
export default {
  data () {
    return {
      project_id: "358",
      company_id: "1",
      yAxis: [],
      legend: [],
      xAxis: [],
      selectValue: 1,
      materialList: [
        {
          name: "混凝土",
          value: 1
        },
        {
          name: "水泥",
          value: 2
        },
        {
          name: "黄砂",
          value: 3
        },
        {
          name: "石子",
          value: 4
        }
      ],
      materialData: {
        soil: {
          summary: 0,
          devide_rate: 0
        },
        cement: {
          summary: 0,
          devide_rate: 0
        },
        sand: {
          summary: 0,
          devide_rate: 0
        },
        stone: {
          summary: 0,
          devide_rate: 0
        },
        projectNameList: [],
        offsetList: [],
        userInfo: {}
      }
    };
  },
  props: {
    projectId: {}
  },
  watch: {
    projectId: {
      handler (newval) {
        this.project_id = newval;
        this.getMaterialData();
      },
      deep: true
    }
  },
  methods: {
    // 获取在场人员数据
    getMaterialData () {
      standardCodeApi
        .getMaterialManagementNewAPI({
          data: {
            materiel_type: this.selectValue,
            company_id: this.company_id,
            project_id: this.project_id
          }
        })
        .then(res => {
          let materialList = res.data.materiel;
          if (this.userInfo.comp_id === "46") {
            materialList = mockData.materiel;
          }
          if (materialList.length > 0) {
            this.materialData.soil = materialList[0];
            this.materialData.cement = materialList[1];
            this.materialData.sand = materialList[2];
            this.materialData.stone = materialList[3];
          } else {
            this.materialData = this.$options.data().materialData;
          }
          let projectList = res.data.list;
          if (this.userInfo.comp_id === "46") {
            projectList = mockData.list;
          }
          let projectNameList = [];
          let projectValueList = [];
          if (projectList.length > 0) {
            projectList.map(item => {
              projectNameList.push(item.project_name);
              projectValueList.push({
                value: item.all_summary,
                label: {
                  position: "inside"
                }
              });
            });
          }
          this.materialData.projectNameList = projectNameList;
          this.materialData.offsetList = projectValueList;
          // let id = document.getElementById('projectDeviationEchart')
          // let intervalId = setInterval(() => {
          //   console.log(id, 'material startics')
          //   if (id) clearInterval(intervalId)
          // })
          this.$nextTick(() => {
            this.initEcharts();
          });
        });
    },
    initEcharts () {//图表初始化
      let myChart = this.$echarts.init(
        document.getElementById("projectDeviationEchart")
      );
      let option = {
        color: ["#FFAD0B"],
        // title: {
        //   text: '交错正负轴标签',
        //   subtext: 'From ExcelHome',
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          // formatter: '{b}<br> 累计偏差: {c}',
          formatter: params => {
            return `${params[0].name}<br>累计偏差${params[0].data.value}
            ${this.selectValue === 1 ? "m³" : "吨"}`;
          }
        },
        //  grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true
        // },
        grid: {
          top: 80,
          bottom: 30,
          left: 80,
          containLabel: false
        },
        xAxis: {
          type: "value",
          position: "top",
          inverse: true,
          splitLine: {
            lineStyle: {
              type: "dashed"
            }
          }
        },
        // yAxis: {
        //   type: "category",
        //   axisLine: { show: false },
        //   axisLabel: { show: false },
        //   axisTick: { show: false },
        //   splitLine: { show: false },
        //   data: this.materialData.projectNameList
        // },
        yAxis: [
          {
            type: 'category',
            axisLine: { show: false },
            axisLabel: { show: true },
            axisTick: { show: false },
            splitLine: { show: false },
            //显示省略号操作（第一步）
            axisLabel: {
              show: true,
              textStyle: {
                color: '#5A5E66'
              },
              //显示省略号操作（第一步）
              formatter: function (value) {
                var val = ''
                if (value.length > 5) {
                  val = value.substr(0, 5) + '...'
                  return val
                } else {
                  return value
                }
              }
            },
            data: this.materialData.projectNameList
          }
        ],
        series: [
          {
            name: "累计偏差",
            type: "bar",
            stack: "总量",
            label: {
              // show: true,
              formatter: "{b}"
            },
            data: this.materialData.offsetList
          }
        ]
      };

      myChart.setOption(option);
    }
  },
  created () { },
  mounted () {
    this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    this.company_id = window.localStorage.getItem("comp_id");
    this.project_id = this.projectId;

    setTimeout(() => {
      this.getMaterialData();
    });
  }
};
</script>
<style scoped lang="scss">
.material-statics-container {
  /deep/ .el-input--small .el-input__inner {
    background: none !important;
    border: none !important;
    color: #1890ff;
  }
  .statics-list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 150px;
    padding: 20px 0;
    border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
    .statics-item {
      width: 205px;
      height: 110px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: 20px;
      &:last-child {
        margin-right: 0;
      }
      &.cement {
        .statics-num {
          background: #e6f7ff;
          p {
            color: #1890ff;
          }
        }
        .statics-title {
          background: #bae7ff;
        }
      }
      &.sand {
        .statics-num {
          background: #fffbe6;
          p {
            color: #faad14;
          }
        }
        .statics-title {
          background: #fff1b8;
        }
      }
      &.stone {
        .statics-num {
          background: #f6ffed;
          p {
            color: #52c41a;
          }
        }
        .statics-title {
          background: #d9f7be;
        }
      }
      .statics-num {
        width: 100%;
        height: 75px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #f0f5ff;
        flex-direction: column;
        p {
          font-size: 28px;
          font-weight: bold;
          color: #1441b3;
        }
        span {
          color: #73d13d;
          font-size: 14px;
          margin-top: 4px;
          &.warning {
            color: #ff4d4f;
          }
        }
      }
      .statics-title {
        width: 100%;
        height: 35px;
        background: #d6e4ff;
        display: flex;
        align-items: center;
        justify-content: center;
        p {
          font-size: 14px;
          color: #000;
        }
      }
    }
  }
  .register-person-echart {
    width: 100%;
    margin-top: 20px;
    .register-person-title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      h2 {
        font-size: 16px;
        color: #000;
        font-weight: bold;
      }
      .tab-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tab-item {
          width: 60px;
          height: 24px;
          border-radius: 12px;
          font-size: 14px;
          text-align: center;
          line-height: 24px;
          margin-right: 10px;
          color: #000;
          background: #fff;
          cursor: pointer;
          &.selected {
            color: #fff;
            background: #1890ff;
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
    .project-deviation-echart {
      width: 100%;
      height: 400px;
    }
  }
}
</style>
